<template>
  <data-table-app-page>
    <el-form slot="toolbar" inline :model="searchForm">
      <el-form-item label="发布者">
        <el-input
          v-model="publisherName"
          clearable
          style="width: 100px"
          @focus="onPublisherInputFocus"
          @clear="publisherName = '', searchForm.publisher = null"></el-input>
      </el-form-item>
      <el-form-item label="任务状态">
        <type-select
          v-model="searchForm.orderStatus"
          :items="DictMan.items('volunteer.orderStatus')"
          style="width: 128px"
          v-slot="{item}"
        >
          <status-tag :status="item.value" />
        </type-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker
          v-model="createTimes"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          align="right"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          style="width:240px;"
        />
      </el-form-item>
      <el-form-item v-if="app.admin.roleId != 9" label="所属社区">
        <org-select v-model="searchForm.orgId" />
      </el-form-item>
      <el-form-item>
        <data-table-query-button :query-params="() => ({
            ...searchForm,
            ...(createTimes ? {startCreateTime: createTimes[0], endCreateTime: createTimes[1]} : {})
          })" />
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      url="/api/volunteer/help/page"
    >
      <el-table-column prop="serviceId" label="任务编号" width="130" show-overflow-tooltip></el-table-column>
      <el-table-column prop="professionText" label="服务领域" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="serviceTime" label="服务时间" width="140"></el-table-column>
      <el-table-column prop="orgName" label="所属社区" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orderStatus" label="任务状态" width="100" v-slot="{row}">
        <status-tag :status="row.orderStatus" />
      </el-table-column>
      <el-table-column prop="taskTypeText" label="任务类型" width="80"></el-table-column>
      <el-table-column prop="publisherName" label="发布者" width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="160"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button
            @click="onDetailsClick(row)"
          >
            详情
          </el-button>
          <el-button
            v-if="row.orderStatus != -1"
            @click="onOrderClick(row)"
          >
            订单
          </el-button>
          <delete-confirm-button
            v-if="row.orderStatus == -1"
            @ok="onDeleteClick(row)"
          />
          <!--
          <el-button
            v-if="row.orderStatus == -1"
            type="info"
            plain
            @click="onUpdateClick(row)"
          >
            修改
          </el-button>-->
        </template>
      </el-table-column>
    </data-table>

    <user-query-selector ref="userQuerySelector" />
  </data-table-app-page>
</template>

<script>
import { Select } from 'element-ui';
import StatusTag from '@/pages/volunteer/order/StatusTag';

export default {
  pageProps: {
    title: '志愿者任务'
  },
  components: {
    OrgSelect: () => ({ component: import('@/pages/org/OrgSelect.vue'), loading: Select, delay: 0 }),
    UserQuerySelector: () => import('@/pages/user/UserQuerySelector.vue'),
    StatusTag
  },
  data() {
    return {
      searchForm: {},
      createTimes: null,
      publisherName: '',
      app
    }
  },
  methods: {
    /*
    onAddClick() {
      this.pushPage({
        path: '/volunteer/help/edit',
        key: 'add',
        params: {
          mode: 'add',
          onSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        }
      });
    },*/
    onUpdateClick({serviceId}) {
      this.pushPage({
        path: '/volunteer/help/edit',
        key: serviceId,
        params: {
          mode: 'update',
          serviceId,
          onSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        }
      });
    },
    async onDeleteClick({serviceId}) {
      const ret = await this.$http.delete('/api/volunteer/help', {params: { serviceId }});
      if (ret.success) {
        this.$message.success('删除成功');
        this.$refs.table.reloadCurrentPage();
      }
    },
    onDetailsClick(help) {
      this.pushPage({
        path: '/volunteer/help/details',
        key: help.serviceId,
        params: {
          help
        }
      });
    },
    onOrderClick(help) {
      if (help.taskType == 0) {
        this.pushPage({
          path: '/volunteer/order/details',
          key: help.orderCode,
          params: {
            order: {
              orderno: help.orderCode,
              status: help.orderStatus
            }
          }
        });
      } else {
        this.pushPage({
          path: '/volunteer/order',
          params: {
            help
          }
        });
      }
    },
    onPublisherInputFocus() {
      this.searchForm.publisher = null;
      this.publisherName = null;
      this.$refs.userQuerySelector.show({
        onOk: (user) => {
          this.searchForm.publisher = user.id;
          this.publisherName = user.realName || user.aliasName;
          return true;
        }
      });
    }
  }
}
</script>